<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>考试管理</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
		<link rel="stylesheet" href="../../../css/public.css" media="all">
	</head>
	<body>
		<div class="layuimini-container">
			<div class="layuimini-main">
				<!--搜索开始-->
				<fieldset class="layui-elem-field layuimini-search">
					<legend>搜索信息</legend>
					<div style="margin: 10px 10px 10px 10px">
						<form class="layui-form layui-form-pane" action="" id="searchFrm">

							<!-- 选择学生的弹出框 -->
							<div class="layui-form-item">
								<label class="layui-form-label">学生信息</label>
								<div class="layui-input-inline">
									<input type="hidden" name="studentId" id="student_id" />
									<input type="text" id="student_name" readonly="readonly" autocomplete="off" placeholder="请选择学生" class="layui-input">
								</div>
								<div class="layui-input-inline">
									<a class="layui-btn layui-btn-warm" id="getStudnet"><label class="layui-icon layui-icon-male"></label>选择</a>
								</div>

								<label class="layui-form-label">课程信息</label>
								<div class="layui-input-inline">
									<input type="hidden" name="courseId" id="course_id" />
									<input type="text" id="course_name" readonly="readonly" autocomplete="off" placeholder="请选择课程" class="layui-input">
								</div>
								<div class="layui-input-inline">
									<a class="layui-btn layui-btn-warm" id="getCourse"><label class="layui-icon layui-icon-male"></label>选择</a>
								</div>

								<div class="layui-inline">
									<label class="layui-form-label">考试成绩</label>
									<div class="layui-input-inline">
										<input type="text" name="examGrade" autocomplete="off" class="layui-input">
									</div>
								</div>

								<div class="layui-inline">
									<label class="layui-form-label">学期选择</label>
									<div class="layui-input-block">
										<select name="examType">
											<option value=""></option>
											<option value="1">第一学期</option>
											<option value="2">第二学期</option>
											<option value="3">第三学期</option>
											<option value="4">第四学期</option>
										</select>
									</div>
								</div>

								<div class="layui-inline" style="margin-left: 167px;">
									<label class="layui-form-label">考试名称</label>
									<div class="layui-input-inline">
										<input type="text" name="examName" autocomplete="off" class="layui-input">
									</div>
								</div>

								<!-- <button type="button" class="layui-btn layui-btn-green layui-icon layui-icon-download-circle layui-btn-radius layui-btn-sm"
									 id="doExport" style="margin-top: 4px">导出
									</button> -->
							</div>

							<div class="layui-form-item">
								<div class="layui-block" style="text-align: center;">
									<a class="layui-btn " lay-submit="" lay-filter="data-search-btn"><label class="layui-icon layui-icon-search"></label>搜索</a>
									<a class="layui-btn layui-btn-warm" onclick="javascript:$('#searchFrm')[0].reset();$('#student_id').val('');$('#course_id').val('')"
									 lay-filter="data-search-btn"><label class="layui-icon layui-icon-refresh"></label>重置</a>
								</div>
							</div>
						</form>
					</div>
				</fieldset>
				<!--搜索结束-->

				<!-- 添加修改开始 -->
				<div id="addOrUpdateDiv" style="display: none;padding: 0.3125rem">
					<form method="post" class="layui-form layui-form-pane" lay-filter="dataFrm" id="dataFrm">
						<!-- 选择学生的弹出框 -->
						<div class="layui-form-item">
							<label class="layui-form-label">学生信息</label>

							<div class="layui-input-inline">
								<input type="hidden" name="examId" />
							</div>

							<div class="layui-input-inline">
								<input type="hidden" name="studentId" id="student_id1" />
								<input type="text" id="student_name1" readonly="readonly" autocomplete="off" placeholder="请选择学生" class="layui-input">
							</div>
							<div class="layui-input-inline">
								<a class="layui-btn layui-btn-warm" id="getStudnet1"><label class="layui-icon layui-icon-male"></label>选择</a>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">课程信息</label>
							<div class="layui-input-inline">
								<input type="hidden" name="courseId" id="course_id1" />
								<input type="text" id="course_name1" readonly="readonly" autocomplete="off" placeholder="请选择课程" class="layui-input">
							</div>
							<div class="layui-input-inline">
								<a class="layui-btn layui-btn-warm" id="getCourse1"><label class="layui-icon layui-icon-male"></label>选择</a>
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-inline">
								<label class="layui-form-label">考试成绩</label>
								<div class="layui-input-inline">
									<input type="text" name="examGrade" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label">考试名称</label>
								<div class="layui-input-inline">
									<input type="text" name="examName" autocomplete="off" class="layui-input">
								</div>
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-inline">
								<label class="layui-form-label">学期选择</label>
								<div class="layui-input-block">
									<select name="examType">
										<option value=""></option>
										<option value="1">第一学期</option>
										<option value="2">第二学期</option>
										<option value="3">第三学期</option>
										<option value="4">第四学期</option>
									</select>
								</div>
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-input-block" style="text-align: center;margin: 0 auto;">
								<a class="layui-btn" lay-submit="" lay-filter="doSubmit"><label class="layui-icon layui-icon-release"></label>提交</a>
								<a class="layui-btn layui-btn-warm" onclick="javascript:$('#dataFrm')[0].reset();$('#student_id1').val('');$('#course_id1').val('')" lay-filter="data-search-btn"><label
									 class="layui-icon layui-icon-refresh"></label>重置</a>
							</div>
						</div>
					</form>
				</div>
				<!--添加修改的弹出层结束-->


				<!--表格开始-->
				<table class="layui-hide" id="userTable" lay-filter="userTable"></table>
				<script type="text/html" id="userToolBar">
					<a class="layui-btn  layui-btn-sm layui-btn-warm data-count-delete" lay-event="add">成绩添加</a>
					<a class="layui-btn  layui-btn-sm layui-btn-danger data-count-delete" lay-event="batchdelete">批量删除</a>
				</script>
				<script type="text/html" id="userTableBar">
					<a class="layui-btn layui-btn-xs layui-btn-warm data-count-delete " lay-event="update">修改</a>
					<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
				</script>
				<!--表格结束-->
			</div>
		</div>
		<script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
		<script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
		<script src="../../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
		<script src="../../../lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
		<script src="../../../lib/common/jquery.cookie.min.js" charset="utf-8"></script>
		<script src="../../../lib/common/common.js" charset="utf-8"></script>
		<script src="../../../lib/common/selectLayer.js" charset="utf-8"></script>
		<script src="../../../lib/common/Convert_Pinyin.js" charset="utf-8"></script>

		<script>
			layui.use(['form', 'table', 'laydate', 'layer'], function() {
				var form = layui.form;
				var table = layui.table;
				var laydate = layui.laydate;
				var layer = layui.layer;

				//渲染时间选择器
				laydate.render({
					elem: '#create_time',
					type: 'datetime'
				});

				var tableIns = table.render({
					elem: '#userTable',
					url: api + 'Exam/ExamList',
					toolbar: "#userToolBar",
					cellMinWidth: true,
					cols: [
						[{
								type: "checkbox",
								fixed: "left"
							},
							{
								field: 'examId',
								title: '考试编号',
								align: "center",
							},
							{
								field: 'username',
								title: '学生姓名',
								align: "center",
							},
							{
								field: 'examGrade',
								title: '分数',
								align: "center",
							},
							{
								field: 'examName',
								title: '考试名称',
								align: "center",
							},
							{
								field: 'courseName',
								title: '课程名称',
								align: "center",
							},
							{
								field: 'examType',
								title: '在读学期',
								align: "center",
								templet: function(d){
									var html="";
									if(d.examType == 1){
										html="<font color=red>第一学期</font>"
									}else if(d.examType == 2){
										html="<font color=black>第二学期</font>"
									}else if(d.examType == 3){
										html="<font color=blue>第三学期</font>"
									}else if(d.examType == 4){
										html="<font color=green>第四学期</font>"
									}
									return html;
							}},
							{
								field: 'createTime',
								title: '考试时间',
								align: "center"
							},
							{
								title: '操作',
								templet: '#userTableBar',
								fixed: "right",
								align: "center"
							}
						]
					],
					page: true
				});

				// 监听搜索操作
				form.on('submit(data-search-btn)', function(data) {
					var params = $("#searchFrm").serialize();
					//执行搜索重载
					table.reload('userTable', {
						page: {
							curr: 1
						},
						url: api + 'Exam/ExamList?' + params
					});
					return false;
				});

				//搜索框的 监听选择学生
				$("#getStudnet").click(function() {
					getStudentList('', function(id, name) {
						$("#student_id").val(id);
						$("#student_name").val(name);
					});
				});

				//搜索框的 监听选择课程
				$("#getCourse").click(function() {
					getCourseList('', function(id, name) {
						$("#course_id").val(id);
						$("#course_name").val(name);
					});
				});

				//添加的 监听选择学生
				$("#getStudnet1").click(function() {
					var sid=$("#student_id1").val();
					getStudentList(sid, function(id, name) {
						$("#student_id1").val(id);
						$("#student_name1").val(name);
					});
				});

				//添加的 监听选择课程
				$("#getCourse1").click(function() {
					var cid=$("#course_id1").val();
					getCourseList(cid, function(id, name) {
						$("#course_id1").val(id);
						$("#course_name1").val(name);
					});
				});


				//导出
				$("#doExport").click(function() {
					var params = $("#searchFrm").serialize();
					window.location.href = api + "stat/exportCustomer?" + params;
				});

				//监听表头的事件
				table.on('toolbar(userTable)', function(obj) {
					var checkStatus = table.checkStatus(obj.config.id);
					switch (obj.event) {
						case 'batchdelete':
							batchdelete();
							break;
						case 'add':
							openAddUser();
							break;
					};
				});

				//批量删除
				function batchdelete() {
					var checkStatus = table.checkStatus('userTable'); //idTest 即为基础参数 id 对应的值
					var data = checkStatus.data;
					var length = checkStatus.data.length;
					console.log(checkStatus.data) //获取选中行的数据
					console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
					if (length == 0) {
						layer.msg("请选中要删除的行数据");
					} else {
						layer.confirm('真的删除选择中这些数据么?', function(index) {
							var params = "";
							$.each(data, function(index, item) {
								if (index == 0) {
									params +="ids="+ item.examId;
								} else {
									params +="&ids="+ item.examId;
								}
							});
							$.post(api + "Exam/DeleteEaxm", params, function(res) {
								layer.msg(res.msg);
								tableIns.reload();
								layer.close(index);
							})
						});
					}
				}

				//监听行数据的事件
				table.on('tool(userTable)', function(obj) {
					var data = obj.data;
					if (obj.event === 'delete') {
						layer.confirm('真的删除【' + data.examId + '】成绩吗？', function(index) {
							$.post(api + "Exam/DeleteEaxm", {
								ids: data.examId
							}, function(res) {
								layer.msg(res.msg);
								obj.del();
								layer.close(index);
							})
						});
					} else if (obj.event === 'update') {
						openUpdateUser(data);
					}
				});

				//打开添加用户的弹层
				var mainIndex;
				var url; //动态的url
				function openAddUser() {
					mainIndex = layer.open({
						type: 1,
						title: '统计成绩',
						content: $("#addOrUpdateDiv"),
						area: ['600px', '450px'],
						success: function(index) {
							url = api + "Exam/AddEaxm";
							//重置表单
							$("#dataFrm")[0].reset();
							$('#student_id1').val('');
							$('#course_id1').val('');
						}
					});
				}

				//打开修改获取参数弹出层
				function openUpdateUser(data) {
					mainIndex = layer.open({
						type: 1,
						title: '修改【' + data.examId + '】成绩信息',
						content: $("#addOrUpdateDiv"),
						area: ['600px', '450px'],
						success: function(index) {
							url = api + "Exam/UpdateEaxm";
							//装载数据表格
							form.val("dataFrm", data);
							console.log(data)
							$("#student_name1").val(data.username);
							$("#course_name1").val(data.courseName);

						}
					});
				}
				//提交数据
				form.on("submit(doSubmit)", function(data) {
					var params = $("#dataFrm").serialize();
					$.post(url, params, function(res) {
						layer.msg(res.msg);
						if (res.code == 200) {
							tableIns.reload();
						}
						layer.close(mainIndex);
					})
					return false;
				});
			});
		</script>
	</body>
</html>
